/*
 * @Author: wangdengduo
 * @Date: 2023-05-08 16:58:24
 * @LastEditors: wangdengduo
 * @LastEditTime: 2023-05-10 09:58:09
 * @FilePath: \todo\src\components\hederBar\index.js
 * @Description:
 */
import { Input, Switch } from "antd";
import "./index.css";
import { useContext, useEffect } from "react";
import { searchContext } from "@/store";


const HeaderBar = () => {
  const { dispatch, theme, dispatchTheme } = useContext(searchContext);

  let searchTimer = null;

  /**
   * 查询函数，利用防抖方法优化性能
   * @param {input} e
   *
   */
  const onSearch = (e) => {
    clearTimeout(searchTimer);
    searchTimer = setTimeout(() => {
      dispatch({ type: "UPDATE", value: e.target.value });
    }, 300);
  };

  useEffect(() => {
    dispatch({ type: "UPDATE", value: "" });
    dispatchTheme({ type: "UPDATE", value: "light" });
  }, []);

  const changeTheme = (value) => {
    dispatchTheme({ type: "UPDATE", value: value ? "dark" : "light" });
  };

  return (
    <div className="wrap-search">
      <Input
        placeholder="input search text"
        style={{ width: 400 }}
        onChange={onSearch}
      />
      <Switch
        className="theme-switch"
        checked={theme === "dark"}
        onChange={changeTheme}
        checkedChildren="dark"
        unCheckedChildren="light"
      />
    </div>
  );
};

export default HeaderBar;
